<template>
  <div class="lix-container">
    <div class="lix-pdt__header">
      <div class="lix-pdt__swipper">
        <swiper :indicator-dots="true" :autoplay="true" interval="5000" duration="1000" :circular="true" @change="swiperChange" @animationfinish="animationfinish">
          <div v-for="(item, index) in imgUrls" :key="index">
            <swiper-item @click="handleSwiper" :data-index="index">
              <image :src="item" class="slide-image"/>
            </swiper-item>
          </div>
        </swiper>
      </div>
      <div class="lix-pdt__info">
        <div class="title-view">
          <div class="title">六年级上衣</div>
          <div class="share">
            <!-- <image src="../static/images/share.png" /> -->
          </div>
        </div>
        <!-- <div class="desc"><span>「立减50元」</span>小屏高性能的双摄手机 / 后置1200万 AI双摄 / 12nm八核处理器 / AI 人脸解锁</div> -->
        <div class="price">
          <span class="unit">￥</span>949
          <!-- <span class="old-price delete"><span class="old-unit">￥</span>999</span> -->
        </div>
      </div>
    </div>
    <div class="lix-pdt__content">
      <div class="color">
        <div>尺码选择：</div>
        <div class="color-container">
          <div class="color-item" :class="[activeIdx === index ? 'isActive' : '']" v-for="(item, index) in sku.color" :key="index" @click="selectSize" :data-idx="index">
            <div class="key">{{ item.key }}</div>
          </div>
        </div>
      </div>
      <!-- <div class="option-container">
        <div class="section">
          <div class="title">已选</div>
          <div class="value">红米6 4GB+64GB 铂银灰 x 1</div>
          <div class="arrow"><image src="../static/images/arrow.png"/></div>
        </div>
        <div class="section">
          <div class="title">已选</div>
          <div class="value">红米6 4GB+64GB 铂银灰 x 1</div>
          <div class="arrow"><image src="../static/images/arrow.png"/></div>
        </div>
        <div class="section tip-section">
          <div class="tips">
            <div class="icon"><image src="../static/images/check.png" /></div>
            <div class="text">7天无理由退货</div>
          </div>
          <div class="tips">
            <div class="icon"><image src="../static/images/check.png" /></div>
            <div class="text">15天质量问题换货</div>
          </div>
          <div class="tips">
            <div class="icon"><image src="../static/images/check.png" /></div>
            <div class="text">365天保修</div>
          </div>
        </div>
      </div> -->
      <!-- <div class="product-detail">
        <div v-for="(item, index) in imgUrls" :key="index">
            <image :src="item"/>
          </div>
      </div> -->
      <div class="fixed"></div>
    </div>
    <div class="lix-pdt__skufotter">
      <button>加入购物车</button>
    </div>
    <div class="lix-pdt__markview" v-if="showChoseSku">
      <div class="lix-pdt__chosesku">
        <div class="sku-container">
          <div class="header">
            <div class="img">
              <image src="https://i8.mifile.cn/a1/pms_1538019072.40043349!560x560.png" />
            </div>
            <div class="info">
              <div class="price">
                <span class="unit">￥</span>949
                <span class="old-price delete"><span class="old-unit">￥</span>999</span>
              </div>
              <div class="desc">红米6 4GB+64GB 铂银灰</div>
            </div>
            <div class="close">
              <image src="../static/images/close.png" />
            </div>
          </div>
          <div class="seperate"></div>
          <scroll-view scroll-y style="height: 518rpx;">
            <div class="category">
              <div>版本</div>
              <div class="cate-item" v-for="(item, index) in sku.category" :key="index">
                <div class="key">{{ item.key }}</div>
                <div class="price">{{ item.price }}元</div>
              </div>
            </div>
            <div class="seperate"></div>
            <div class="color">
              <div>颜色</div>
              <div class="color-container">
                <div class="color-item" v-for="(item, index) in sku.color" :key="index">
                  <div class="key">{{ item.key }}</div>
                </div>
              </div>
            </div>
            <div class="seperate"></div>
            <div class="count">
              购买数量
              <!-- <zan-stepper :stepper="stepper" :min="min" :max="max" componentId="stepper" size="small" @handleZanStepperChange="handleZanStepperChange"/> -->
            </div>
          </scroll-view>
        </div>
        <div class="lix-pdt__skufotter">
          <button>加入购物车</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {
  },
  data() {
    return {
      imgUrls: [
        '../../static/images/441538205156_.pic.jpg',
        '../../static/images/411538205140_.pic.jpg',
        '../../static/images/401538205135_.pic.jpg'
      ],
      sku: {
        'category': [
          {id: 1, key: '3GB+32GB', price: 1769},
          {id: 2, key: '4GB+32GB', price: 2769},
          {id: 3, key: '6GB+64GB', price: 3188}
        ],
        'color': [
          {id: 1, key: '铂银灰', price: 1769},
          {id: 2, key: '巴黎蓝', price: 1769},
          {id: 3, key: '流沙金', price: 1769},
          {id: 4, key: '樱花粉', price: 1769},
          {id: 1, key: '铂银灰', price: 1769},
          {id: 2, key: '巴黎蓝', price: 1769},
          {id: 3, key: '流沙金', price: 1769},
          {id: 4, key: '樱花粉', price: 1769}
        ]
      },
      showChoseSku: false,
      stepper: 1,
      min: 1,
      max: 20,
      activeIdx: 1
    };
  },
  methods: {
    selectSize(e) {
      const idx = e.mp.currentTarget.dataset.idx;
      console.log(idx);
      this.activeIdx = idx;
    }
  }
};
</script>

<style lang="scss">
@import "../../theme-chalk/product.scss";
</style>
